<!--
 * @description: SliderCom;
 * @Date: 2023-04-11 10:16:48
 * @example: 
 * @params: 
-->
<template>
    <div class="Container" :class="{touming:props.backtrsprant}" ref="headline" >
    <p class="title">{{props.title}}</p> 
    <div class="silder" :class="{ vertical:props.vertical}">
        <el-slider
         v-model="props.silVal"
         :vertical="props.vertical"
         :step="props.step"
         :format-tooltip="formatter"
          />
         </div> 

    </div> 
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
    title:{
        type: String,
        default:() => "New Slider......."
    },
    silVal:{
        type: Number,
        default:() => 0
    },
    vertical:{
        type: Boolean,
        default:() => false
    },
    step:{
        type: Number,
        default:() => 0
    },
    unit:{
        type: String,
        default:() => ""
    },
    backtrsprant:{
        type: Boolean,
        default:() => false
    },
    gradientColor:{
        type:String,
        default:() => ""
    }

})

const formatter = (val) => {
    return  `${val}${props.unit}`
}
</script>
<style lang="less" scoped>
.Container {
     width: 100%;
     height: 100%;
     white-space: pre-wrap;
     padding: 20px;
     color: black;
     font-weight: bold;
     box-sizing: border-box;
     text-align: left;
     background-color: v-bind('props.gradientColor') !important;
     position: relative;
    .title {
        position: absolute;
        top: 30px;
    }
    .silder {
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .vertical {
        height: 200px !important;
    }
}
.bgc {
    // background-color: #f9fafb;
}
.align_center {
    text-align: center;
}
.touming { 
    background-color: transparent !important;
}
</style>